<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    表单：在网页中主要负责数据采集功能，使用<from>标签定义表单
    表单项(元素)：不同类型的input元素，下拉列表，文本域等

    <form>          定义表单
        1.action    规定当提交表单时向何处发送表单数据 URL       表单项数据要想被提交，则必须指定其name属性
        2.method    规定用于发送表单数据的方式
           -get：    (默认值)浏览器会将数据直接附在表单的action URL之后，会有大小限制 4KB
           -post：   浏览器会将数据放置到http请求消息中，大小无限制
    <input>         定义表单项，通过type属性控制输入形式
    <label>         为表单项定义标注
    <select>        定义下拉列表
    <option>        定义下拉列表的列表项
    <textarea>      定义文本域


    type取值
    text                默认值。定义单行的输入字段
    password            定义密码字段
    radio               定义单选按钮
    checkbox            定义复选框
    file                定义文件上传按钮
    hidden              定义隐藏的输入字段
    submit              定义提交按钮，同时将表单数据发送到服务器
    reset               定义重置按钮，同时清除表单中的所有数据
    button              定义可点击的按钮
-->
<form action="#" method="post">
<!--表单项数据要想被提交，则必须指定其name属性-->
    <input type="hidden" name="id" value="123">

    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>
    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>
    <label >性别：</label>
    <input type="radio" name="sex" value="1" id="male"><label for="male"> 男</label>
    <input type="radio" name="sex" value="2" id="female"><label for="female"> 女</label>
    <br>
    <label >爱好：</label>
    <input type="checkbox" name="hobby" value="1" id="travel"><label for="travel"> 旅游</label>
    <input type="checkbox" name="hobby" value="2" id="movie"><label for="movie"> 电影</label>
    <input type="checkbox" name="hobby" value="3" id="game"><label for="game"> 游戏</label>
    <br>

    <label>头像</label>
    <input type="file" >
    <br>

    <label>城市：</label>
    <label>
        <select name="city">
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guangzhou">广州</option>
        </select>
    </label>
    <br>

    <label>个人描述：</label>
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br>
    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="普普通通的按钮">

</form>

</body>
</html>